<template>
  <div class="rule-main">
    <el-form :model="selectTable" :rules="rules" ref="selectTable" label-width="150px">
      <p class="title">高级基本信息</p>
      <el-form-item label="告警规则名称：" prop="name" >
        <el-input v-model="selectTable.name" style="width: 400px;"></el-input>
      </el-form-item>
      <el-form-item label="规则生效时间：" prop="enableDate" >
        <el-date-picker type="date" placeholder="选择日期" v-model="selectTable.enableDate" value-format="yyyy-MM-dd" style="width: 400px;"></el-date-picker>
      </el-form-item>
      <el-form-item label="规则失效时间：" prop="disableDate" >
        <el-date-picker type="date" placeholder="选择日期" v-model="selectTable.disableDate" value-format="yyyy-MM-dd" style="width: 400px;"></el-date-picker>
      </el-form-item>
      <el-form-item label="告警类型：" prop="alarmType">
        <el-select v-model="selectTable.alarmType" placeholder="请选择告警类型" style="width: 400px;" @change="changeAlarmType">
          <el-option label="过压" value="1"></el-option>
          <el-option label="欠压" value="2"></el-option>
          <el-option label="过流" value="3"></el-option>
          <el-option label="过频" value="4"></el-option>
          <el-option label="漏电" value="5"></el-option>
          <el-option label="电流过低" value="6"></el-option>
          <el-option label="输出功率过大或过小" value="7"></el-option>
          <el-option label="端口用电量超过阈值" value="8"></el-option>
          <el-option label="设备温度超过阈值" value="9"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="告警级别：" prop="level">
        <el-select v-model="selectTable.level" placeholder="请选择告警级别" style="width: 400px;">
          <el-option label="5" value="5"></el-option>
          <el-option label="4" value="4"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="通知方式：" prop="type">
        <el-checkbox-group v-model="selectTable.type">
          <el-checkbox label="语音通知" name="type"></el-checkbox>
          <el-checkbox label="短信通知" name="type"></el-checkbox>
          <el-checkbox label="E-mail语音通知" name="type"></el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="告警升级规则：">
          <div class="rule-box">
               <el-tooltip class="item" effect="light" content="告警生成后被确认，则不会升级" placement="top-start">
                    <span class="tips"><img src="../../assets/icon-tips.jpg" /></span>
               </el-tooltip>
               <div class="rule-lf" :class="{'clearfix': upgradeFlag}" v-for="(item,index) in upgrades" :key="index">
                    告警压缩次数超过  <el-input class="ipts" v-model="item.number"></el-input> 次&nbsp;&nbsp;&nbsp;&nbsp;
                    告警级别升为  
                    <el-select v-model="item.level" placeholder="请选择" size="mini">
                        <el-option label="4" value="4"></el-option>
                    </el-select> 
                    <span class="add-rule" @click="delUpgradRule(index)" v-if="upgrades.length > 1">-删除</span>
                    <span class="add-rule" @click="addUpgradRule()" v-if="index == upgrades.length - 1">+新增</span>
              </div>
              
            </div>
      </el-form-item>
      <el-form-item label="是否启用：">
        <el-switch v-model="selectTable.value" active-color="#409EFF"
          inactive-color="#ddd">
        </el-switch>
      </el-form-item>

      <p class="title">告警规则信息</p>

      <el-form-item label="阈值设置模式：">
        <el-radio-group v-model="selectTable.resource" style="width: 400px;">
          <el-radio label="1">固定值</el-radio>
          <el-radio label="2">百分比</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="输出电压："  prop="" class="dy">
        大于 <el-select v-model="selectTable.mode" placeholder="请选择" style="width: 220px;">
          <el-option key="1" label="220" value="220"></el-option>
        </el-select>
        额定电压 <el-input v-model="selectTable.name"  style="width: 100px;"></el-input> 
        <span v-if="selectTable.resource == 1">V</span>
        <span v-else>%</span>
      </el-form-item>
      <el-form-item label="告警压缩周期：" prop="name">
        <el-input v-model="selectTable.name"  style="width: 400px;"></el-input>
      </el-form-item>
      <el-form-item label="告警使用设备："  prop="name">
        <el-input v-model="selectTable.name"  placeholder="请输入设备名称/设备ID" style="width: 400px;">
            <el-button slot="append" icon="el-icon-search" @click="searchDevice()"></el-button>
        </el-input>

        <el-button-group class="btns-group" :class="{'port-btns-group': !isDeviceAlarm}">
            <el-button @click="filterDevice(1)" :class="{'cur': filterDeviceType == 1}">全部</el-button>
            <el-button @click="filterDevice(2)" :class="{'cur': filterDeviceType == 2}">已选择</el-button>
        </el-button-group>
      </el-form-item>
      <el-form-item label="" prop="" v-if="isDeviceAlarm">
        <el-table
            ref="multipleTable"
            :data="deviceList"
            tooltip-effect="dark"
            style="width: 700px"
            @selection-change="handleSelectionChange">
            <el-table-column
            type="selection"
            width="55">
            </el-table-column>
            <el-table-column
            label="设备ID"
            width="80">
            </el-table-column>
            <el-table-column
            prop=""
            label="设备名称"
            width="120">
            </el-table-column>
            <el-table-column
            prop=""
            width="90"
            label="设备类型">
            </el-table-column>
            <el-table-column
            prop=""
            width="100"
            label="所属商户">
            </el-table-column>
            <el-table-column
            prop=""
            width="100"
            label="所属分组">
            </el-table-column>
            <el-table-column
            prop=""
            width=""
            label="在线状态">
            </el-table-column>
        </el-table>
      </el-form-item>
      <el-form-item label="" prop="" v-else>
        <el-table
            ref="multipleTable"
            :data="deviceList"
            tooltip-effect="dark"
            style="width: 1200px"
            @selection-change="handleSelectionChange">
            <el-table-column
            type="selection"
            width="55">
            </el-table-column>
            <el-table-column
            label="设备ID"
            width="80">
            </el-table-column>
            <el-table-column
            prop=""
            label="设备名称"
            width="120">
            </el-table-column>
            <el-table-column
            prop=""
            width="90"
            label="设备类型">
            </el-table-column>
            <el-table-column
            prop=""
            width="100"
            label="所属商户">
            </el-table-column>
            <el-table-column
            prop=""
            width="100"
            label="所属分组">
            </el-table-column>
            <el-table-column
            prop=""
            width=""
            label="在线状态">
            </el-table-column>
            <el-table-column
            prop=""
            width=""
            label="端口">
            </el-table-column>
            <el-table-column
            prop=""
            width=""
            label="传感器类型">
            </el-table-column>
            <el-table-column
            prop=""
            width=""
            label="传感器名称">
            </el-table-column>
                        <el-table-column
            prop=""
            width=""
            label="传感器MAC">
            </el-table-column>
        </el-table>
      </el-form-item>
      <el-form-item class="btns">
        <el-button>取消</el-button>
        <el-button type="primary" @click="onSubmit">保存</el-button>
      </el-form-item>
    </el-form>
  </div>

</template>

<script>
  export default {
    data() {
      return {
        params: {},
        limit: 20,
        count: 0,
        filterDeviceType: 1,
        upgradeFlag: true,
        tableData: [{name:'eeeee'}],
        upgrades: [{number: '', level: ''}],
        deviceList: [],
        currentPage: 1,
        DEVICE_ALARM: 9, //设备告警
        isDeviceAlarm: true, //是否是设备报警
        selectTable: {
            alarmType: '',
            name: '',
            type: [],
            resource:'1',
        },
        rules: {
            name: [
            { required: true, message: '请输入告警规则名称', trigger: 'blur' }
          ],
        }
      }
    },
    created() {
      this.initData()
    },
    methods: {
      async initData() {
        try{
          this.city = await cityGuess()
          const countData = await getResturantsCount()
          if (countData.status == 1) {
            this.count = countData.count
          }else{
            throw new Error('获取数据失败')
          }
          this.getResturants()
        }catch(err){
          console.log('获取数据失败', err)
        }
      },
      async getResturants() {
        const {latitude, longitude} = this.city
        const restaurants = await getResturants({limit: this.limit})
        this.tableData = []
        restaurants.forEach(item => {
          const tableData = {}
          tableData.name = item.name
          tableData.address = item.address
          tableData.description = item.description
          tableData.id = item.id
          tableData.phone = item.phone
          tableData.rating = item.rating
          tableData.recent_order_num = item.recent_order_num
          tableData.category = item.category
          tableData.image_path = item.image_path
          this.tableData.push(tableData)
        })
      },
      changeAlarmType() {
          if(this.selectTable.alarmType == this.DEVICE_ALARM) {
              //设备告警
              this.isDeviceAlarm = true
          } else {
              //端口告警
              this.isDeviceAlarm = false
          }
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`)
      },
      handleCurrentChange(val) {
        this.currentPage = val
        this.offset = (val - 1)*this.limit
        this.getResturants()
      },
      handleSelectionChange() {},
      filterDevice(type) {
          this.filterDeviceType = type
      },
      addUpgradRule() {
           this.upgrades.push({number: '', level: ''})
      },
      delUpgradRule(index) {
          this.upgrades.splice(index, 1)
      },
      searchDevice() {
          console.log('searchDevice')
      },
      onSubmit() {
        this.$message({
          message: '告警规则添加成功',
          type: 'success'
        });
      }
    },
  }
</script>

<style lang="less">
    .rule-main {
        padding: 20px;
        background: #fff;
        overflow: hidden;
    }
    .rule-main .title {
        border-bottom: 1px solid #ececec;
        padding-bottom: 10px;
        margin-bottom: 25px;
    }
    .rule-main .btns {
        padding-left: 0;
    }
    .add-rule {
        color: #409EFF;
        cursor: pointer;
        margin-left: 10px;
    }
    .rule-box {
        color: #606266;
        position: relative;
    }
    .rule-box .ipts {
        width: 100px;
    }
    .rule-box .rule-lf {
        padding-bottom: 10px;
        overflow: hidden;
    }
    .rule-box .tips {
        position: absolute;
        left: -20px;
        top: -8px;
    }
    .dy {
        color:#606266;
    }
    .btns-group {
        margin-left: 172px;
        //670
    }
    .port-btns-group {
        margin-left: 670px;
    }
    .btns-group .cur {
        border: 1px solid #409EFF;
        color: #409EFF;
    }
    // 
</style>
